@import './reset';
body{
	background: white;
}
.container{
	width: 100%;
	background: #F5F8FA;
	overflow: hidden;
	padding-bottom: calculateRem(60px);

	.top{
		width: 100%; 
		height: auto;
		background: white;
		margin-bottom: calculateRem(10px);
		.top-1{
			width: 100%;
			height: calculateRem(190px);
			background:  linear-gradient(-180deg, #E62622 0%, #F04224 100%);
			position: relative;
			overflow: hidden;
			.collect{
				display: inline-block;
				border: 1px solid #F18885;
				border-radius: 2px;
				width: calculateRem(68px);
				height: calculateRem(26px);
				line-height: calculateRem(26px);
				text-align: center;
				position: absolute;
				right: calculateRem(10px);
				top: calculateRem(14px);
				font-size: 14px;
				color: #FCEAE9;
				&:active{
					background: #e21a14;
				}
			}

			>h2{
				width: 80%;
				height: calculateRem(56px);
				line-height: calculateRem(56px);
				margin: calculateRem(24px) 10% 0;
				color: white;
				text-align: center;
				font-size: calculateRem(40px);
				font-weight: normal;
				@include ell;
			}
			>h3{
				width: 80%;
				height: calculateRem(22px);
				line-height: calculateRem(22px);
				margin: 0 10%;
				color: white;
				text-align: center;
				font-size: calculateRem(16px);
				font-weight: normal;
				@include ell;
			}
			.field{
				width: 100%;
				margin-top: calculateRem(22px);
				height: calculateRem(48px);
				.subfield{
					max-width: 33.33%;
					position: relative;
					&:after{
						content: '';
						display: block;
						width: 1px; 
						height: calculateRem(28px);
						background: rgba(255,255,255,.4);
						position: absolute;
						right: 0;
						top: calculateRem(8px);
					}
					&:last-child{
						&:after{
							display: none;
						}
					}

					.per{	
						width: 100%;
						height: calculateRem(26px);
						line-height: calculateRem(26px);
						font-size: calculateRem(18px);
						color: white;
						@include ell;
						text-align: center;

					}
					.des{
						width: 100%;
						height: calculateRem(20px);
						line-height: calculateRem(20px);
						font-size: calculateRem(14px);
						color: white;
						@include ell;
						text-align: center;

					}

				}
			}

		}
		.top-2{
			width: 100%;
			height: calculateRem(54px);
			line-height: calculateRem(54px);
			padding: 0 calculateRem(18px);
			box-sizing: border-box;
			@include ell;
			>img{
				width: calculateRem(27px);
				height: calculateRem(27px);
				vertical-align: -6px;
				margin-right: 2px;

			}
			>span{
				font-size: calculateRem(17px);
				color: #333333;
				>i{
					color: #e62622;
				}
			}
		}
	}

	.p-infos{
		width: 100%;
		box-sizing: border-box;
		padding: calculateRem(16px);
		background: white;
		margin-bottom: calculateRem(10px);
		.pic{
			width: calculateRem(62px);
			height: calculateRem(62px);
			margin-right: calculateRem(16px);
			border-radius: 50%;
			overflow: hidden;

			/*background: url(../images/c.jpg);*/
			background-size: 100%;
    		background-position: 50% 50%;
    		background-repeat: no-repeat;
    		box-sizing: border-box;
    		border: 0.5px solid #dcdcdc;
			>img{
				width: 100%;
				height: 100%;
				display: none;
			}
		}
		.infos{
			max-width: 73%;
			.name{
				width: 100%;
				height: calculateRem(35px);
				box-sizing: border-box;
				border-bottom: 1px solid #eaeaea;
				font-size: calculateRem(18px);
				color: #4B4B4B;
				@include ell;
				margin-bottom: calculateRem(6px);
				font-weight: bold;
				.fans{
					font-size: calculateRem(16px);
					font-weight: normal;
					color: #666;
					float: right;
				}
			}
			.info-l{
				width: 100%;
				height: calculateRem(23px);
				line-height: calculateRem(23px);
				box-sizing: border-box;
				font-size: calculateRem(16px);
				color: #4B4B4B;
				@include ell;
			}
			.dep-line{
				width: 100%;
				height: auto;
				line-height: calculateRem(23px);
				box-sizing: border-box;
				font-size: calculateRem(16px);
				color: #4B4B4B;
				.dep{
					display: inline-block;
					font-size: calculateRem(16px);
		        }
		        .text{
		        	font-size: calculateRem(16px);
		        }
			}
		}
	}

	.earnings{
		width: 100%;
		box-sizing: border-box;
		background: white;
		margin-bottom: calculateRem(10px);
		.nav{
			width: 100%;
			height: calculateRem(38px);
			line-height: calculateRem(38px);

			.btn{
				max-width: 25%;
				background: white;
				font-size: calculateRem(15px);
				color: #2B2E33;
				text-align: center;
				position: relative;
				box-sizing: border-box;
				border-bottom: 1px solid #D5D8DC;
				&:active{
					background: #fafafa;
				}
				&:after{
					content: '';
					display: block;
					background: #D5D8DC;
					position: absolute;
					width: 1px;
					height: calculateRem(16px);
					right: 0;
					top: calculateRem(11px);
				}
				&:last-child{
					&:after{
						display: none;
					}
				}

			}
			.active{
				color: #F21612;
				&:before{
					content: '';
					position: absolute;
					bottom: -1px;
					left: 50%;
					height: 2px;
					width: calculateRem(58px);
					margin-left: calculateRem(-29px);
					background: #F21612;
				}
			}

		}

		.b-wrap{
			width: 100%;
			height: auto;
			overflow: hidden;
			.t-bar{
				width: 100%;
				height: calculateRem(40px);
				line-height: calculateRem(24px);
				box-sizing: border-box;
				padding: calculateRem(16px) calculateRem(16px) 0;
				.bar-l{
					width: 40%;
					height: calculateRem(24px);
					float: left;
					color: #333;
					font-size: calculateRem(16px);
					font-weight: bold;
				}
				.bar-r{
					width: 60%;
					height: calculateRem(24px);
					font-size: calculateRem(14px);
					color: #666;
					float: right;
					text-align: right;
					.g{
						&:before{
							content: '';
							display: inline-block;
							width: 10px;
							height: 10px;
							box-sizing: border-box;
							border-radius: 50%;
							border: 2px solid #e62622;
							margin-right: 2px;
						}

					}
					.hs{
						margin-left: 6px;
						&:before{
							content: '';
							display: inline-block;
							width: 10px;
							height: 10px;
							box-sizing: border-box;
							border-radius: 50%;
							border: 2px solid #2297e6;
							margin-right: 2px;
						}

					}
				}
			}
			.blank{
				width: 100%;
				height: auto;
				box-sizing: border-box;
				padding: 0 calculateRem(16px) calculateRem(16px);
				
				.chart{
					width: 100%;
					/*width: 288px;*/
					height: calculateRem(160px);
				}
			}
		}
	}

	.stack{
		width: 100%;
		box-sizing: border-box;
		background: white;
		margin-bottom: calculateRem(10px);
		.nav{
			width: 100%;
			height: calculateRem(38px);
			line-height: calculateRem(38px);

			.btn{
				max-width: 50%;
				background: white;
				font-size: calculateRem(15px);
				color: #2B2E33;
				text-align: center;
				position: relative;
				box-sizing: border-box;
				border-bottom: 1px solid #D5D8DC;
				&:active{
					background: #fafafa;
				}
				&:after{
					content: '';
					display: block;
					background: #D5D8DC;
					position: absolute;
					width: 1px;
					height: calculateRem(16px);
					right: 0;
					top: calculateRem(11px);
				}
				&:last-child{
					&:after{
						display: none;
					}
				}

			}
			.active{
				color: #F21612;
				&:before{
					content: '';
					position: absolute;
					bottom: -1px;
					left: 50%;
					height: 2px;
					width: calculateRem(68px);
					margin-left: calculateRem(-34px);
					background: #F21612;
				}
			}

		}

		.stack-wrap{
			width: 100%;
			height: auto;
			padding: 0 calculateRem(16px);
			.in-wrap{
				width: 100%;
				height: auto;
				.l-stack{
					width: 100%;
					height: auto;
					box-sizing: border-box;
					border-bottom: 1px solid #d8d8d8;
					padding: calculateRem(12px) 0;
					.stack-t{
						width: 100%;
						height: calculateRem(20px);
						line-height: calculateRem(20px);
						font-size: calculateRem(14px);
						color: #666;
						margin-bottom: calculateRem(4px);

					}
					.line-1{
						width: 100%;
						height: calculateRem(22px);
						line-height: calculateRem(22px);
						.line-1-l{
							width: 50%;
							height: calculateRem(22px);
							float: left;
							@include ell;
							>img{
								width: calculateRem(16px);
								height: calculateRem(16px);
								vertical-align: text-bottom;
								margin-right: 3px;
							}
						}
						.line-1-r{
							width: 50%;
							height: calculateRem(22px);
							float: left;
							@include ell;
							text-align: right;
						}
					}
					.line-2{
						width: 100%;
						height: calculateRem(20px);
						line-height: calculateRem(20px);
						.line-2-l{
							width: 50%;
							height: calculateRem(20px);
							font-size: calculateRem(14px);
							color: #7F7F7F;
							float: left;
							@include ell;

						}
						.line-2-r{
							width: 50%;
							height: calculateRem(20px);
							font-size: calculateRem(14px);
							color: #7F7F7F;
							float: left;
							@include ell;
							text-align: right;
						}
					}
				}
			}
			.see-more{
				display: block;
				width: 100%;
				height: calculateRem(54px);
				line-height: calculateRem(54px);
				text-align: center;
				font-size: calculateRem(16px);
				color: #666666;
				&:active{
					background: #fafafa;
				}
				span{
					&:after{
						content: '';
						display: inline-block;
						width: calculateRem(11px);
						height: calculateRem(11px);
						background: url(../images/arrow_icon_1@2x.png) no-repeat;
						background-size: 100%;
						margin-left: 3px;

					}
				}

			}
		}

	}

	.business-config{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: calculateRem(16px);
		background: white;
		margin-bottom: calculateRem(10px);
		overflow: hidden;
		.title{
			width: 100%;
			height: calculateRem(22px);
			line-height: calculateRem(22px);
			font-size: calculateRem(16px);
			color: #333333;
			margin-bottom: calculateRem(16px);
		}
		.chart{
			width: calculateRem(240px);
			height: calculateRem(300px);
			box-sizing: border-box;
			margin: 0 auto;
			position: relative;
			&:after{
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				opacity: 0;

			}
		}

	}

	.comments{
		width: 100%;
		box-sizing: border-box;
		padding: calculateRem(16px);
		padding-bottom: 0;
		background: white;
		margin-bottom: calculateRem(10px);
		overflow: hidden;
		border-bottom: 1px solid #DAE3EA;
		.title{
			width: 100%;
			height: calculateRem(22px);
			line-height: calculateRem(22px);
			font-size: calculateRem(16px);
			color: #333333;
			/*margin-bottom: calculateRem(16px);*/
		}
		.c-wrap{
			width: 100%;
			height: auto;

			.c-list{
				width: 100%;
				height: auto;
				box-sizing: border-box;
				border-bottom: 1px solid #d8d8d8;
				padding: calculateRem(14px) 0;
				.c-top{
					width: 100%;
					height: calculateRem(22px);
					line-height: calculateRem(22px);
					.top-l{
						width: 50%;
						height: calculateRem(22px);
						line-height: calculateRem(22px);
						float: left;
						@include ell;
						font-size: calculateRem(16px);
						color: #FF703A;
						>img{
							height: calculateRem(20px);
							width: calculateRem(20px);
							vertical-align: top;
							margin-left: 3px;
						}
					}
					.top-r{
						width: 50%;
						height: calculateRem(22px);
						float: left;
						@include ell;
						text-align: right;
						font-size: calculateRem(14px);
						color: #7F7F7F;
					}
				}

				.text{
					width: 100%;
					height: auto;
					line-height: calculateRem(23px);
					max-height:calculateRem(69px);
					color: #333;
					font-size: calculateRem(16px);
					@include break;
					@include mulell(3);
					overflow: hidden;
				}

			}
			.empty{
				width: 100%;
				height: auto;
				text-align: center;
				overflow: hidden;
				>img{
					width: calculateRem(60px);
					height: calculateRem(60px);
					margin-top: calculateRem(42px);
				}
				>p{
					margin: 0;
					margin-bottom: calculateRem(50px);
					margin-top: calculateRem(14px);
					font-size: calculateRem(16px);
					color: #999999;
					text-align: center;
				}
			}
		}
		.func{
			width: 100%;
			height: calculateRem(52px);
			line-height: calculateRem(52px);
			font-size: 0;
			.all,.me{
				display: inline-block;
				width: 50%;
				height: calculateRem(52px);
				font-size: calculateRem(18px);
				color: #333333;
				text-align: center;
				position: relative;
				&:active{
					background: #fafafa;
				}
				>img{
					width: calculateRem(24px);
					height: calculateRem(24px);
					vertical-align: text-bottom;
					margin-right: 3px;
				}

			}
			.me{
				&:before{
					content:'';
					background: #E3E3E3;
					width: 1px;
					height: calculateRem(22px);
					position: absolute;
					left: 0;
					top: calculateRem(17px);

				}

			}
		}


	}



}

.footer{
	width: 100%;
	height: calculateRem(60px);
	padding: 0 calculateRem(10px);
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: white;
	.now-sign{
		display: block;
		width: 100%;
		height: calculateRem(50px);
		background: #E62622;
		border-radius: calculateRem(5px);
		color: white;
		font-size: calculateRem(20px);
		text-align: center;
		line-height: calculateRem(50px);
		
		&:active{
			background: #C51B0D;
		}

	}
}